<template>
  <div>
    <div v-if="tableConfig.topOperate" class="tab-operator">
      <slot name="tableExtraOperate"></slot>
    </div>
    <!--<div v-if="!tableConfig.isTreeTable" class="tab-box">-->
    <div class="tab-box">
      <!--普通列表-->
      <el-table
        ref="searchTable"
        :data="tableData"
        v-loading="loading"
        element-loading-text="加载中，请稍后..."
        element-loading-spinner="el-icon-loading"
        highlight-current-row
        class="table temp-table"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <!--   <el-table-column v-if="tableConfig.isIndex" label="序号" type="index" width="55">
             <template slot-scope="scope">
               {{(scope.$index + 1) + pagination.pageSize * (pagination.pageNumber - 1)}}
             </template>
           </el-table-column>-->

        <el-table-column v-if="!tableConfig.isRadio" type="selection" width="55">
        </el-table-column>

        <el-table-column v-if="tableConfig.isRadio" width="55">
          <template slot-scope="scope">
            <!--              <el-radio :label="scope.$index" v-model="templateRadio" @change.native="getTemplateRow(scope.$index, scope.row)">&nbsp</el-radio>-->
            <el-radio :label="scope.$index" v-model="templateRadio" @change.native="getTemplateRow(scope.$index, scope.row)"></el-radio>
          </template>
        </el-table-column>

        <template v-for="(item, index) in tableConfig.columnConfig">
          <!---->
          <template v-if="item.isSlot">
            <el-table-column
              :key="index"
              :formatter="item.formatter"
              :width="item.width"
              :sortable="item.isSort"
              :prop="item.prop"
              :label="item.label">
              <template slot-scope="scope">
                <slot v-if="item.isSlot" :name="item.prop" :row="scope.row" />
              </template>
            </el-table-column>
          </template>

          <!--非操作栏-->
          <template v-else>
            <el-table-column
              v-if="item.prop !== 'operator'"
              :key="index"
              :formatter="item.formatter"
              :width="item.width"
              :sortable="item.isSort"
              :prop="item.prop"
              :label="item.label">
              <!--<slot v-if="item.formatter" :name="item.prop" v-html="item.formatter"></slot>-->
            </el-table-column>
            <!--操作栏-->
            <el-table-column
              v-if="item.prop === 'operator'"
              :key="index"
              :fixed="item.fixed"
              :width="item.width"
              :prop="item.prop"
              :label="item.label"
              class="operator">
              <template slot-scope="scope">
                <slot name="tableOperator" :row="scope.row" />
              </template>
            </el-table-column>
          </template>
        </template>
      </el-table>

    </div>

    <div style="display: flex;justify-content: flex-end">
      <el-pagination
        v-show="total>0"
        :background="background"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :layout="layout"
        :page-sizes="pageSizes"
        :total="total"
        v-bind="$attrs"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  export default {
    name: "TablePagination",
    props: {
      loading:{
        type:Boolean,
        default:false
      },
      tableData:{
        type:Array,
        default() {
          return [];
        }
      },
      tableConfig: {
        type: Object,
        default() {
          return {}
        }
      },
      isFeed: {
        type: Boolean,
        default: true
      },

      // 分页配置
      total: {
        required: true,
        type: Number
      },
      page: {
        type: Number,
        default: 1
      },
      limit: {
        type: Number,
        default: 20
      },
      pageSizes: {
        type: Array,
        default() {
          return [10, 20, 30, 50]
        }
      },
      layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
      },
      background: {
        type: Boolean,
        default: true
      },
      autoScroll: {
        type: Boolean,
        default: true
      },
      hidden: {
        type: Boolean,
        default: false
      }
    },
    computed:{
      currentPage: {
        get() {
          return this.page
        },
        set(val) {
          this.$emit('update:page', val)
        }
      },
      pageSize: {
        get() {
          return this.limit
        },
        set(val) {
          this.$emit('update:limit', val)
        }
      }
    },
    data() {
      return {
        templateRadio: '',
        selectedRows: [], // 多选
        selectedRow:[]   // 单选
      }
    },
    methods:{
      // 多选勾选数据
      handleSelectionChange(rows) {
        console.log("rows",rows)
        this.selectedRows = []
        this.selectedRows = rows
      },
      // 单选
      getTemplateRow(index, row) {
        console.log("index,row",index,row)
        this.selectedRow = []
        this.selectedRow.push(row)
        console.log(this.selectedRow)
      },

      handleSizeChange(val) {
        console.log(val)
        this.currentPage = 1
        console.log(this.currentPage)
        this.$emit('getList', { page: 1, limit: val })
        // this.$emit('getList', { page: this.currentPage, limit: val })

      },
      handleCurrentChange(val) {
        console.log(val)
        console.log(this.pageSize)
        this.$emit('getList', { page: val, limit: this.pageSize })
      }
    }
  }
</script>

<style scoped lang="scss">
  /*表格换行显示*/
  .el-table .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /*隐藏单选框的文字*/
  ::v-deep .el-radio__label{
    display: none;
  }

  .pagination-container {
    background: #fff;
    padding: 32px 16px;
  }
  .pagination-container.hidden {
    display: none;
  }
</style>
